<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>层定位</title>
        <style>
            body {
                background-color: antiquewhite;
            }
            #div0 {
                width: 1024px;
                /* border: 1px solid red; */
                margin: 50px auto;
                position: relative;
            }

            #div1 {
                width: 100%;
                height: 150px;
                background-color: brown;
                position: absolute;
            }
            #div2 {
                width: 19%;
                height: 200px;
                background-color: brown;
                position: absolute;
                top: 160px;
                left: 0px;
            }
            #div3 {
                width: 19%;
                height: 200px;
                background-color: brown;
                position: absolute;
                top: 370px;
                left: 0px;
            }
            #div4 {
                width: 19%;
                height: 200px;
                background-color: brown;
                position: absolute;
                top: 160px;
                left: 210px;
            }
            #div5 {
                width: 19%;
                height: 200px;
                background-color: brown;
                position: absolute;
                top: 370px;
                left: 210px;
            }
            #div6 {
                width: 38.5%;
                height: 410px;
                background-color: brown;
                position: absolute;
                top: 160px;
                left: 420px;
            }
            #div7 {
                width: 19%;
                height: 200px;
                background-color: brown;
                position: absolute;
                top: 160px;
                right: 0px;
            }
            #div8 {
                width: 19%;
                height: 200px;
                background-color: brown;
                position: absolute;
                top: 370px;
                right: 0px;
            }
            #div9 {
                width: 100%;
                height: 150px;
                background-color: brown;
                position: absolute;
                top: 580px;
            }
            #searchInput {
                width: 500px;
                height: 40px;
                border: 3px solid orange;
                margin: 0 400px;
                position: fixed;
                top: 0px;
                z-index: 2;
            }
            /* #root {
                 width: 1080px; 
                position: relative;
            } */
        </style>
    </head>
    <body>
        <div id="root">
            <div id="searchInput">搜索：</div>
            <div id="div0">
                <div id="div1"></div>
                <div id="div2"></div>
                <div id="div3"></div>
                <div id="div4"></div>
                <div id="div5"></div>
                <div id="div6"></div>
                <div id="div7"></div>
                <div id="div8"></div>
                <div id="div9"></div>
            </div>
        </div>
    </body>
</html>
